import "pixi-spine";
import * as PIXI from "pixi.js";
import { Spine } from "pixi-spine";

// let app, animation;
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
export default class SPINEMD {
    constructor(viewChild, spineJson, screenWidth, screenHeight) {
        this.viewChild = viewChild
        this.spineJson = spineJson
        this.screenWidth = screenWidth;
        this.screenHeight = screenHeight;
        this.app = null;
        this.animation = null;
    }
    async init() {
        let animation = this.animation;
        let app = this.app;
        let screenWidth = this.screenWidth;
        let screenHeight = this.screenHeight;
        let viewChild = this.viewChild
        let spineJson = this.spineJson
        app = new PIXI.Application({ backgroundAlpha: 0, width: screenWidth - 100, height: screenHeight - 100 });
        viewChild.appendChild(app.view);
        await PIXI.Assets.load("http://127.0.0.1:3000/spine/p" + spineJson + "/P" + spineJson + ".json").then(onAssetsLoaded);
        function onAssetsLoaded(resource) {
            animation = new Spine(resource.spineData);
            // 对齐原点
            const localRect = animation.getLocalBounds();
            animation.position.set(-localRect.x, -localRect.y);
            // spine动画大小  app.screen.width画布大小 animation.width spine动画宽度
            const scale = Math.min(
                (app.screen.width * 1.2) / animation.width,
                (app.screen.height * 1.2) / animation.height,
            );
            animation.scale.set(scale, scale);
            // 动画位置
            animation.position.set(
                app.screen.width * 0.5,
                app.screen.height * 0.5,
            );
            app.stage.addChild(animation);
            animation.state.setAnimation(0, "animation", false);
            // 设置动画速度为原速度的两倍
            // animation.state.timeScale = 2;
        }
        this.app = app
    }
    
    destroy() {
        this.app.destroy({ children: true, texture: true, baseTexture: true });
    }
}
// const spineMD = async (viewChild, spineJson) => {
//     app = new PIXI.Application({ backgroundAlpha: 0, width: screenWidth - 100, height: screenHeight - 100 });
//     viewChild.appendChild(app.view);
//     await PIXI.Assets.load("http://127.0.0.1:3000/spine/p7735/P7735.json").then(onAssetsLoaded);
//     function onAssetsLoaded(resource) {
//         animation = new Spine(resource.spineData);
//         // 对齐原点
//         const localRect = animation.getLocalBounds();
//         console.log(localRect)
//         animation.position.set(-localRect.x, -localRect.y);
//         // spine动画大小  app.screen.width画布大小 animation.width spine动画宽度
//         const scale = Math.min(
//             (app.screen.width * 1.3) / animation.width,
//             (app.screen.height * 1.3) / animation.height,
//         );
//         animation.scale.set(scale, scale);
//         // 动画位置
//         animation.position.set(
//             app.screen.width * 0.5,
//             app.screen.height * 0.5,
//         );
//         app.stage.addChild(animation);
//         animation.state.setAnimation(0, "animation", false);
//     }
//     app.destroy({ children: true, texture: true, baseTexture: true });
//     return app
// }
// export default spineMD;

